<template>
  <div id="pageWindow" class="seckill">
    <header>
      <img :src="picList[0]">
      <a href="javascript:;" id="share" onclick="share('99任选', '99任选', '');">
        <img src="https://mstatic.shandjj.com/default/common/common-images/share_white.png">
      </a>
    </header>
    <div class="tab">
      <span :class="{'active':defaultIdx==index}" v-for="(item,index) in tabs" :key="index" @click="selectIndex(index)">{{item}}</span>
    </div>
    <div class="goods-menu">
      <div>
        <div class="goods-list">
          <div style="width:100%;">
            <img :src="picList[defaultIdx + 1]">
          </div>
          <div class="goods-item vertical" v-for="(item,index) in goodsList" :key="index" @click="goTo(item.goods_id)">
            <div class="pic-box">
              <img :src="item.img320_url">
            </div>
            <div class="goods-info">
              <p class="title ellipsis">{{item.goods_name}}</p>
              <div class="price_con">
                <span>
                  劲爆价:
                  <b>{{item.flash_price}}</b>
                  <s>￥{{item.shop_price}}</s>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 加载动画 -->
    <div class="loading_box">
      <div class="load">
        <div class="circle2"></div>
        <p>闪</p>
      </div>
    </div>
    <!--返回顶部-->
    <span id="return-top">
      <img src="https://mstatic.shandjj.com/default/common/common-images/list_numb_press1@2x.png">
    </span>
  </div>
</template>
<script>
import { backTop } from "assets/js/sdjjPublic.js";
import { resetAddress } from "@/utils/utils.js";
import BaseUrl from "@/utils/ajaxRequest.js";
export default {
  name: "superSeckill",
  data() {
    return {
      setLinkString: "", //图片的基本地址
      pageName: "seckill", //图片分类的名称
      defaultIdx: 0,
      tabs: ["99任选3件", "199任选2件", "399任选2件"],
      picList: [],
      goodsList: [],
      arrList: [
        "1491085,1499953,1491091,1250231,1228113,1499995,1499957,1499955,1499989,1499993,1263055,1499967,1499969,1500531,1500529,1499959,1483519,1499961,1499983,1499977,1499975,1499987,1499981,1499985,561776,1499991,1499973,1499971,1499979,1268519,1499043,1499045,1499047,1499049,1499051,1499053,1499055,1499055,1498015,1498017,1498019,1498021,1498015,1498017,1498019,1498021",
        "1498251,1498241,1498265,1498275,1498293,1498325,1498317,1498297,1498245,1498247,1497459,1497457,1497455,1497453,1497451,1497449,1497447,1497443,1497437,1497433,1497429,1497427,1497425,1497421,1497415,1497411,1497405,1497401,1497399,1497397,1497395,1497393,1497391,1497389,1497387,1497385,1497383,1497381,1497379,1497377,1497375,1497373,1497371,1497369,1497461,1497407,1497413,1497417,1497419,1497423,1497431,1497435,1497439,1497441,1497445,1497467,1497465,1497463,1488977,1497499,1497501,1497503,1497505,1497507,1497497,1497509,1497511,1400545,1497513,1497515,1497517,1497519,1497543,1497541,1497539,1497537,1497535,1497533,1497531,1497529,1497527,1497525,1497523,1497521,1497545,1497547,1497549,1497551,1497553,1497555,1497557,1497565,1497561,1497559,1497563,1491657,1491659,1491655,1491645,1491641,1491639,1488395,1491603,1491609,1491619,1491611,1491613,1491573,1491575,1491577,1491579,1491581,1491583,1491585,1491587,1491589,1491591,1491593,1491595,1491597,1491599,1491601,1491605,1491607,1491615,1491617,1491621,1491623,1491625,1488375,1488377,1488379,1488381,1488383,1488385,1488387,1488389,1488391,1488393,1488397,1488399,1354835,1354837,1354839,1488401,1488403,1488407,1488411,1491631,1491633,1491635,1491637,1491643,1491647,1491649,1491651,1491653,1491661,1491663,1491665,1491667,1491671,1491673,1491675,1491669,1491683,1491685,1491687,1494869,1494871,1494873,1494861,1494863,1494865,1494867,1500381,1500379,1500383,1500385,1500387,1500389,1500391,1500393,1500395,1467401",
        "1498393,1498399,1498411,1498415,1498417,1498419,1414351,1498387,1498421,1498343,1499003,1499005,1499007,1499009,1499011,1499013,1499015,1499017,1499019,1499021,1499023,1499025,1499027,1499029,1499031,1499033,1499035,1499037,1499039,1499041,1500509,1500511,1500507,1500513,1500515,1500517,1500519,1500521,1500523,1500525"
      ],
      toolData: []
    };
  },
  created() {
    this.formatImgLink();
  },
  mounted() {
    backTop("return-top");
    this.getData();
  },
  methods: {
    selectIndex(val) {
      this.defaultIdx = val;
      this.getData();
    },
    goTo(goodsId) {
      jump2good(goodsId);
    },

    // 关闭
    getSeckillGoods() {
      var _this = this;
      // var idsArr=
      for (let i = 0; i < idsArr.length; i++) {
        let idsItem = idsArr[i];
        var ajaxt = "?t=" + new Date().getTime();
        this.$http
          .get(`${BaseUrl}/index.php/goods/goodsList${ajaxt}`, {
            params: { goodsIds: idsItem }
          })
          .then(({ data }) => {
            _this.goodsList[i] = data.data;
          });
        console.log(_this.goodsList);
      }
    },

    getData() {
      var _this = this;

      // 显示
      this.$vux.loading.show({
        text: "Loading"
      });

      if (this.toolData[this.defaultIdx]) {
        console.log("取缓存数据");
        _this.$vux.loading.hide();
        this.goodsList = this.toolData[this.defaultIdx];
        return;
      }

      // var idsItem =  '1491085,1499953,1491091,1250231,1228113,1499995,1499957,1499955,1499989,1499993,1263055,1499967,1499969,1500531,1500529,1499959,1483519,1499961,1499983,1499977,1499975,1499987,1499981,1499985,561776,1499991,1499973,1499971,1499979,1268519,1499043,1499045,1499047,1499049,1499051,1499053,1499055,1499055,1498015,1498017,1498019,1498021,1498015,1498017,1498019,1498021';
      this.$http
        .get(`${BaseUrl}/index.php/goods/goodsList/${new Date().getTime()}`, {
          params: { goodsIds: this.arrList[this.defaultIdx] }
        })
        .then(({ data }) => {
          // 隐藏
          _this.$vux.loading.hide();
          _this.goodsList = data.data;
          _this.toolData[this.defaultIdx] = data.data;
        });
      setTimeout(function() {
        _this.$vux.loading.hide();
      }, 8000);
    },
    //处理静态资源地址
    formatImgLink() {
      // var tempLink = resetAddress();
      // if (tempLink.type == "devLine") {
      //   this.setLinkString = `${
      //     tempLink.assetsLink
      //   }/default/ActiveImg/celebration/img/`;
      // } else if (tempLink.type == "testLine") {
      //   this.setLinkString = `${
      //     tempLink.assetsLink
      //   }/default/ActiveImg/celebration/img/`;
      // } else if (tempLink.type == "onLine") {
      //   this.setLinkString = `${
      //     tempLink.assetsLink
      //   }/default/ActiveImg/celebration/img/`;
      // }
      // let setLinkString = window.location.hostname == "activity.shandjj.com" ? "https://mstatic.shandjj.com/default/ActiveImg/cakeGame/img/" : "http://mstatic.sdjjia.com/default/ActiveImg/cakeGame/img/";
      let setLinkString =
        window.location.hostname == "activity.shandjj.com"
          ? "https://mstatic.shandjj.com/default/ActiveImg/celebration/img/"
          : "http://mstatic.sdjjia.com/default/ActiveImg/celebration/img/";

      // var setLinkString = this.setLinkString;
      this.picList = [
        setLinkString + "count04.jpg",
        setLinkString + "count01.jpg",
        setLinkString + "count02.jpg",
        setLinkString + "count03.jpg"
      ];
    }
  }
};
</script>

<style >
html,
body {
  background: #e50d2d;
}
.seckill {
  width: 100%;
  height: 100%;
  position: relative;
}
#share {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0.15rem 0.3rem;
  position: absolute;
  top: 0.5rem;
  right: 0.2rem;
  box-sizing: content-box;
}
.tab {
  display: flex;
  height: 0.6rem;
  line-height: 0.6rem;
  align-items: center;
  justify-content: space-around;
}
.tab > span {
  flex: 1;
  text-align: center;
  color: #fff;
  margin: 0 0.1rem;
  background: #cf122f;
}
.tab > span.active {
  background: #f96e13;
}
.goods-menu {
  overflow: hidden;
}
.goods-item.vertical {
  float: left;
  width: 3.54rem;
  background: #fff;
  margin: 0 0.1rem 0.15rem;
}
.goods-item.vertical .pic-box {
  margin: 0 auto;
}
.goods-item.vertical .goods-info .title {
  line-height: 0.7rem;
  color: #000;
  overflow: hidden;
  font-size: 0.36rem;
  padding-bottom: 0;
  border-bottom: none;
}
.vertical .goods-title {
  width: 100%;
  line-height: 1.6rem;
  font-family: "PingFang-SC-Regul";
  font-size: 0.4rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vertical .goods-info {
  height: auto;
}
.vertical .price_con > span b {
  font-size: 0.4rem;
  position: relative;
  /* top: -0.12rem; */
}
.vertical .price_con {
  width: 100%;
  color: #fff;
  font-size: 0.3rem;
  background-image: url("https://tjjstatic.taojiji.com/wapsite/default/TaoAction/imgs/online_s_10.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  padding-left: 0.05rem;
}
.vux-loading {
  font-size: 0.32rem;
}
</style>